<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="求职详情"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="item">
				<view class="item-data">
					<view class="item-line">
						<view class="item-title">
							{{detail.gangwei}}
						</view>
						<view class="item-price">
							{{detail.workSalary? Math.floor(detail.workSalary) + (detail.workDanwei?detail.workDanwei:"元/天"):""}}
						</view>
					</view>
					<view class="item-line">
						<text>{{detail.workTime}}</text>
						<text>{{detail.workType}}</text>
					</view>
					<view class="item-bottom">
						<view class="item-date" v-if="detail.timeCreate">
							创建日期：{{detail.timeCreate.split(" ")[0]}}
						</view>
						<view class="item-status" :class="[getStatusClass(detail.status,'className')]" v-if="detail.status!=undefined">
							{{getStatusClass(detail.status,'')}}
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-title">基本信息</view>
				<view class="item-info-box">
					<view class="item-info">
						<text>岗位标签：{{detail.gangwei}}</text>
					</view>
					<view class="item-info">
						<text>岗位薪资：日薪{{Math.floor(detail.workSalary)}}</text>
					</view>
					<view class="item-info">
						<text>工作形式：{{detail.workType}}</text>
					</view>
					<view class="item-info">
						<text>工作时间：{{detail.workTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-update" @click="update">
				<text>
					编辑
				</text>
			</view>
			<view class="main-button-open" @click="togglePost">
				{{detail.isOk=='1'? '关闭':'开放'}}求职
			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {postDetailToMy,favPost,notFavPost,seekerMessage,openOrClose} from "@/core/web-api/qiuzhiduan.js"
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				isExpandedJob: false,
				isExpandedWork: false,
				detail: {
				},
				bottomBtnHeight: uni.upx2px(90),
				id:"",
				isFav:false,
				isOver:true,
			}
		},
		methods: {
			
			update(){
				uni.navigateTo({
					url:"/pages/ucenter/qiuzhiduan/qiuzhi/add?id=" + this.id
				})
			},
			
			/**
			 * 切换开放招聘和关闭招聘
			 */
			togglePost(){
				openOrClose({id:this.id,isOk:this.detail.isOk=='0'?'1':'0'}).then(res=>{
					if(res.code==20000){
						this.detail.isOk = this.detail.isOk=='0'? '1':'0'
					}
				})
			},
			
			/**
			 * 切换收藏
			 */
			toggleFav(){
				if(!this.isOver){
					uni.showToast({
						title:"您的请求频率过高",
						icon:"none"
					})
					return;
				}
				this.isFav? this.notFavData():this.favData();
			},
			
			/**
			 * 收藏
			 */
			favData(){
				favPost({id:this.id}).then(res=>{
					if(res.code==20000){
						this.isFav = true;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).finally(()=>{
					this.isOver = true;
				})
			},
			
			/**
			 * 收藏
			 */
			notFavData(){
				notFavPost({id:this.id}).then(res=>{
					if(res.code==20000){
						this.isFav = false;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).finally(()=>{
					this.isOver = true;
				})
			},
			
			/**
			 * 展开、缩放
			 * @param {Object} type
			 */
			expandedChange(type) {
				this[type] = !this[type]
			},
			
		 
			
			/**
			 * 加载岗位详情
			 */
			getDetail(){
				postDetailToMy({id:this.id}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail;
					}
				})
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl']),
			getStatusClass() {
				return function(status, type) {
					let dist = {
						0: {
							className: "publish",
							name: "已发布"
						},
						1: {
							className: "audio",
							name: "审核中"
						},
						3: {
							className: "",
							name: "草稿"
						},
						2: {
							className: "reject",
							name: "审核拒绝"
						},
						4: {
							className: "reject",
							name: "已关闭"
						}
					};
					console.log(status)
					if(status==0){
						if(this.detail.isOk!=1){
							status=4
						}
					}
					return type == "className" ? (dist[status].className || "") : (dist[status].name || "")
				}
			}
		},
		onShow() {
			if(this.id){
				this.getDetail();
			}
		},
		onLoad(options){
			this.id = options.id
			this.getDetail();
		}
	}
</script>

<style scoped lang="less">
	.contentVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 200upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;

		text {
			display: -webkit-box;
			-webkit-line-clamp: 5;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}
	}

	/* 扩展状态的样式 */
	.contentVisible.expanded {
		height: auto;

		text {
			display: -webkit-box;
			-webkit-line-clamp: unset;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}

		/* 展开后自动调整高度 */
	}

	/* 可选的文本样式 */
	.text {
		margin: 0;
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;

			&-update {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 276upx;
				color: #666666;

				text {
					margin-left: 10upx;
				}
			}

			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 30upx;
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-data {
			position: relative;
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 15upx;

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #d0e0fd;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 30upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}
		
		&-date {
			font-size: 20upx;
			color: #999999;
		}
		
		&-status {
			font-size: 25upx;
			color: #999999;
		
			&.publish {
				color: #00cf7a;
			}
		
			&.audio {
				color: #fc637d;
			}
			&.reject{
				color: #ff0000;
			}
		}

		&-user {
			display: flex;
			align-items: center;

			&-picdir {
				width: 54upx;
				height: 54upx;
				border-radius: 50%;
				border: 2upx solid #bcbcbc;
				box-sizing: border-box;

				image {
					width: 54upx;
					height: 54upx;
					border-radius: 50%;
				}
			}

			&-name {
				margin-left: 10upx;
				font-size: 22upx;
				color: #999999;
			}
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-status {
			font-size: 25upx;
			color: #333333;
		}

		&-info {
			line-height: 1.5;

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;
			}
			&.analysis{
				
				width: 100%;
				font-size: 26upx;
				color: #666666;
				min-height: 200upx;
			}
		}
	}
</style>